import { HomeOutlined } from '@ant-design/icons';
import { Breadcrumb } from 'antd';
import { breadcrumbNameMap } from 'permission/menuConfig';
import * as React from 'react';
import { useMemo } from 'react';
import { Link, useLocation } from 'react-router-dom';

export const BreadCrumb: React.FC = () => {
  const location = useLocation();
  /**
   * 面包屑item[]生成函数
   */
  const generateBreadMenus = useMemo(() => {
    const path = location.pathname;
    const pathSnippets = path.split('/').filter((i: any) => i);
    const pathMap = JSON.parse(localStorage.getItem('pathMap') as string) || {};
    pathMap[path] = location.search;
    localStorage.setItem('pathMap', JSON.stringify(pathMap));
    const extraBreadcrumbItems = pathSnippets.map((_: string, index: number) => {
      if (_ === 'webapp' || _ === 'webseats') {
        return;
      }
      const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
      const fullUrl = `${url}${pathMap[url] || ''}`;
      return <Breadcrumb.Item key={url}>{breadcrumbNameMap[url]}</Breadcrumb.Item>;
    });

    return [
      <Breadcrumb.Item key="home">
        <HomeOutlined />
      </Breadcrumb.Item>,
    ].concat(extraBreadcrumbItems as JSX.Element[]);
  }, [location.pathname, location.search]);

  return <Breadcrumb className="right-layout-breadcrumb">{generateBreadMenus}</Breadcrumb>;
};
